<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>10_事件监听</title>

    </head>
    <body>
        <button onclick="alert('警告框')">弹出警告框</button>
        <button id="btn">我是监听按钮</button>
        <h4>注意：天气转凉，你应该做这些事...</h4>
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur libero obcaecati perspiciatis
                quam totam! Laboriosam, optio ullam? Atque eum ipsa iure minima modi molestiae odit, pariatur quam
                tempore temporibus veritatis?
            </div>
            <div>Eveniet exercitationem labore magni minima nulla, quidem quo unde. Cum inventore magnam minima quasi
                recusandae sequi sunt temporibus tenetur! Beatae blanditiis esse fugit itaque, molestiae molestias
                necessitatibus quas ullam voluptatum.
            </div>
            <div>A, alias consequuntur, corporis cumque delectus dolorum ipsa minus molestias natus placeat quasi quo
                rem rerum ullam, ut? Accusamus alias, facilis iste laudantium libero quisquam quos! Aliquam aliquid
                blanditiis obcaecati.
            </div>
            <div>At cum deserunt ducimus eos error est eveniet illo illum in incidunt iste iure labore laudantium libero
                magni molestias odio officiis optio quaerat quis saepe sapiente sed sint tenetur, voluptates.
            </div>
            <div>Aspernatur cupiditate esse est eveniet explicabo incidunt iste iusto minus nam, neque nihil nobis nulla
                porro possimus quaerat quam quisquam recusandae saepe tempore vel velit voluptas voluptatem voluptatum.
                Id, perferendis.
            </div>
            <div>Aut dolorem fugit iure laudantium maiores, recusandae sapiente tempora voluptatem! Excepturi in itaque
                laudantium nostrum placeat totam vel voluptatum. Commodi dolorem est iure neque omnis perferendis.
                Consectetur iure provident rerum.
            </div>
            <div>Amet asperiores consectetur cupiditate deleniti ea eius error itaque laboriosam minima minus mollitia
                quam, sed. Amet dolorem id illo laborum, maxime nemo odio optio quas rerum sunt suscipit vel voluptatum.
            </div>
            <div>Distinctio dolor illo laudantium ratione. Ab amet at, corporis cum deleniti deserunt ducimus enim
                facilis iste itaque iure magni minima modi mollitia neque non odio quod repellat sed soluta.
                Consequatur.
            </div>
            <div>Adipisci amet asperiores atque commodi culpa deserunt dicta dolore dolorem est eum fugiat id itaque
                libero modi molestiae molestias nemo, nobis non perspiciatis recusandae reiciendis repellendus sed velit
                voluptas voluptatem?
            </div>
            <div>Aliquam atque autem cumque deleniti eaque error excepturi, exercitationem fuga iste maxime nam natus
                nesciunt pariatur quae sint? Aspernatur magni maiores minima non numquam odit tempora? Debitis maxime
                perspiciatis sunt.
            </div>
            <div>Fugiat impedit itaque qui rem repudiandae sunt velit. Deleniti fugit harum itaque labore maiores
                mollitia pariatur totam, voluptates! Alias dignissimos eveniet harum iusto labore mollitia obcaecati
                optio quia, repellendus unde.
            </div>
            <div>Ab asperiores, autem blanditiis commodi consectetur consequatur debitis dicta dignissimos dolores
                dolorum eligendi enim error eum facere id ipsam neque nisi pariatur perspiciatis quasi quibusdam
                repudiandae saepe soluta suscipit veritatis.
            </div>
            <div>Eveniet, facilis fugit laudantium omnis quae quis totam voluptas voluptate. Accusamus aliquam atque
                delectus dicta ea eligendi eos, explicabo id in pariatur quas quidem? Consequatur corporis cupiditate
                doloribus quaerat voluptates.
            </div>
            <div>Aut commodi culpa distinctio ea eaque est hic inventore, itaque nisi nostrum placeat quas quidem quo
                quod quos sequi vel veniam. Atque aut incidunt ipsa neque numquam repellendus saepe sapiente.
            </div>
            <div>Adipisci delectus deleniti enim id reiciendis. Accusantium, adipisci aut autem, consequuntur corporis
                debitis excepturi ipsam itaque iure laborum, natus quisquam! Aliquam eos expedita facilis quas quibusdam
                rerum sint veniam vero!
            </div>
            <div>Alias aspernatur atque beatae corporis cumque delectus dicta dolores error expedita harum illum
                incidunt inventore ipsam iusto neque nesciunt, nisi nostrum odit, praesentium quaerat qui saepe sunt
                veritatis voluptas voluptates!
            </div>
            <div>Delectus, illum, vero. Aperiam asperiores aut autem debitis distinctio doloribus itaque, iure iusto
                mollitia nesciunt nobis numquam odio officia optio, possimus quod quos recusandae, saepe vel voluptate?
                Harum praesentium, suscipit.
            </div>
            <div>A adipisci aliquam aliquid aspernatur atque beatae blanditiis culpa cumque cupiditate debitis dolorem
                dolores ducimus ea eius id illum in iure maxime nam, non numquam qui repudiandae sit unde voluptatibus?
            </div>
            <div>Amet autem eaque officia repellendus sequi tenetur. Ab corporis delectus dicta doloribus, enim eum ex
                explicabo id laborum libero nemo nisi placeat quasi quod reiciendis, soluta tempora temporibus totam
                voluptatibus.
            </div>
            <div>Animi atque, blanditiis consequatur culpa dignissimos doloribus ducimus eaque eos et eum facere
                laboriosam laudantium minima modi mollitia nisi, numquam perspiciatis porro quibusdam quis recusandae
                reiciendis tenetur ullam ut veritatis.
            </div>
            <div>Beatae debitis doloremque earum eos error est in incidunt inventore ipsam, ipsum iste minus nam
                necessitatibus nobis nulla numquam, officiis pariatur perspiciatis quas quod ratione, repellendus
                sapiente sit veritatis vitae.
            </div>
            <div>Iure nostrum, possimus? Accusamus accusantium animi consequatur et minus, necessitatibus repellat sed
                veritatis? Ab assumenda dolore error eveniet, magni molestiae mollitia nobis placeat, quisquam quo,
                temporibus veritatis. Molestias, necessitatibus, quo.
            </div>
            <div>Amet asperiores blanditiis corporis delectus dolor eius enim eveniet hic iure, maxime modi mollitia
                nesciunt nihil, nostrum perferendis qui quis rerum sed tempore velit. Aspernatur incidunt magnam officia
                praesentium soluta.
            </div>
            <div>Cupiditate, excepturi id iste odio reprehenderit vel velit? Aliquam cum delectus dolores illum ipsa
                ipsam iure officia placeat quod repudiandae. Aspernatur delectus iusto minus nisi nobis quasi reiciendis
                ullam, veritatis!
            </div>
            <div>Aliquid asperiores dolore dolorem, doloribus eius labore, laboriosam natus officia quam quibusdam
                quidem quo ratione reprehenderit sit tempore! Consectetur dolorem ducimus eius explicabo inventore minus
                natus perspiciatis quod sit velit?
            </div>
            <div>Amet aperiam deserunt ea eum mollitia nemo nostrum, voluptatem voluptates! Assumenda at consectetur
                culpa deserunt dicta dolorem ducimus ipsa iste quibusdam quis ratione saepe sapiente sed sint, unde, ut,
                voluptas!
            </div>
            <div>Architecto asperiores aspernatur corporis delectus dicta, illum ipsam, labore laudantium natus
                necessitatibus nemo perspiciatis provident quam quibusdam quod, quos suscipit. Animi assumenda delectus
                iusto, maxime placeat praesentium. Dolor eaque, molestiae.
            </div>
            <div>Accusamus aut ipsum itaque possimus vel. Adipisci atque debitis distinctio dolor doloribus ea earum
                explicabo fugiat iste laboriosam, laudantium, libero, minima modi neque nesciunt quam soluta tempore
                veniam voluptate voluptates!
            </div>
            <div>Ab adipisci animi aut consequatur corporis dignissimos excepturi exercitationem fugit hic impedit in
                itaque iure labore modi nemo nesciunt perferendis, praesentium provident ratione, reiciendis rem saepe
                sint soluta totam voluptatem.
            </div>
            <div>Adipisci alias, animi aperiam assumenda atque blanditiis consequatur delectus dicta dolore dolorem
                dolores earum esse excepturi hic illum iste laboriosam modi obcaecati odit officiis placeat porro
                quaerat repellendus veniam voluptatem?
            </div>
            <div>Accusamus corporis cumque fugit iusto modi! A consequuntur fugit officia officiis perferendis
                praesentium quis rerum, voluptatum! Assumenda at eos eum facere incidunt minima modi molestias nesciunt
                odio perspiciatis quo, rerum?
            </div>
            <div>Alias corporis dolorem eligendi, esse et, eum explicabo laboriosam molestias nulla officiis, pariatur
                qui quis rerum similique sint totam veritatis voluptas! Ducimus explicabo molestias, nostrum nulla
                perspiciatis reiciendis rerum sit.
            </div>
            <div>Ab accusamus in natus necessitatibus omnis perferendis ratione repudiandae similique, sint suscipit!
                Consequuntur cumque eos hic molestiae nihil, placeat quam suscipit totam voluptatibus! Aliquid dolores
                recusandae vero voluptates. Dicta, voluptatem!
            </div>
            <div>Accusantium ad aliquid blanditiis corporis, delectus dolor doloremque eligendi esse ex expedita fugiat
                ipsum laborum magnam minima nisi odit, officia perspiciatis praesentium quidem ratione, repellat
                repudiandae sapiente suscipit tempora vitae.
            </div>
            <div>Adipisci aliquid debitis distinctio dolorum eaque expedita facilis, incidunt iusto obcaecati omnis
                possimus, quia rerum soluta ullam ut? Aspernatur blanditiis cumque delectus dolore doloremque eum
                expedita natus recusandae repudiandae rerum!
            </div>
            <div>Accusamus ad aliquid at aut beatae consectetur consequatur cumque cupiditate eius esse explicabo facere
                harum id incidunt iste laboriosam nam nostrum provident quae, ratione rem repudiandae soluta sunt veniam
                voluptate?
            </div>
            <div>Eos hic minus modi obcaecati. Animi asperiores culpa doloremque eum ex fugiat in itaque iusto molestias
                neque, odio officiis, porro sapiente, veritatis voluptatibus. Est excepturi id inventore suscipit
                tempore voluptatibus?
            </div>
            <div>Ad adipisci aliquam animi cumque dignissimos dolor doloremque dolorum ducimus exercitationem iste,
                magnam nesciunt non odit provident quaerat qui quibusdam repudiandae, sapiente sit voluptates? Aperiam
                architecto explicabo id nihil quidem.
            </div>
            <div>Autem commodi consectetur cum doloribus ducimus expedita illum, iste labore libero magnam minima
                perferendis, placeat porro quis repellendus unde voluptatum? Architecto cum impedit incidunt, ipsam
                laborum quae rerum temporibus vel?
            </div>
            <div>Ad beatae commodi corporis doloremque earum, eum facere nesciunt omnis pariatur perspiciatis quae qui
                ratione sapiente, unde ut? Aliquid aperiam corporis dignissimos eaque exercitationem illo in, ipsum
                perspiciatis tenetur veniam!
            </div>
            <div>A accusamus alias at blanditiis cumque doloribus est eveniet exercitationem id magni maiores, minus,
                nisi perspiciatis praesentium quis ratione saepe soluta vitae. Asperiores commodi dolores fugiat in
                maxime necessitatibus non?
            </div>
            <div>Alias aut deserunt ducimus, eligendi explicabo ipsam molestiae quia quisquam sapiente sunt, totam
                voluptate! Dicta eos et id nam necessitatibus quis repellendus repudiandae! Blanditiis ipsam iste minima
                minus nemo voluptates!
            </div>
            <div>Accusamus alias autem corporis cum dicta, doloribus ea eaque earum, et expedita, illo illum labore
                magnam molestiae officia omnis optio pariatur perspiciatis praesentium quam quas recusandae soluta sunt
                tempora unde.
            </div>
            <div>Aliquam at aut corporis delectus eum facilis impedit iste magnam maiores molestiae molestias, nam
                provident recusandae unde veritatis voluptatem voluptatibus? Ab alias animi consequatur corporis
                explicabo quia. Ex necessitatibus, velit?
            </div>
            <div>Ab adipisci aliquid amet blanditiis culpa dolores ea earum eligendi fugiat, iusto laudantium natus,
                nihil nisi officiis, optio perspiciatis placeat porro quibusdam saepe voluptate! Eaque magnam mollitia
                optio quasi similique.
            </div>
            <div>Dignissimos expedita natus necessitatibus repellendus! Amet commodi deserunt dolores dolorum ea eius
                fuga iure laboriosam laborum libero magni nam, neque perspiciatis quibusdam quo sapiente tempora,
                tempore ut velit voluptate voluptatum?
            </div>
            <div>A accusamus officiis quod vel! Consequuntur dolores eos eveniet fugiat hic laudantium molestias natus
                odit suscipit voluptatem? Ab delectus distinctio doloribus eius labore neque, temporibus voluptate. Illo
                nihil nobis velit.
            </div>
            <div>Ad asperiores atque blanditiis cumque dolorum earum, eligendi eos exercitationem explicabo ipsum iure,
                laudantium maiores minima natus neque nisi pariatur quis sed sunt tenetur totam ut velit. Inventore,
                similique, voluptatibus?
            </div>
            <div>Commodi cum ipsa minus natus quasi quos, ratione reiciendis, rem repellat sed sequi sunt totam vel
                voluptatem voluptates. Architecto eos, eum eveniet iste possimus quis similique sunt? Cupiditate, enim
                recusandae.
            </div>
            <div>Ab aut cumque debitis dolore, dolorum earum, eius ex, excepturi ipsam iure natus nemo nostrum numquam
                odit quam quas quasi qui quidem quis quod repellat similique ullam voluptas voluptate voluptatibus.
            </div>
            <div>Alias aliquam deserunt molestias mollitia ullam. A accusantium amet architecto, autem dicta doloribus
                earum fuga minus molestiae pariatur quidem ratione recusandae, sint unde velit veritatis voluptate.
                Cupiditate ea laborum optio.
            </div>
            <div>A consequuntur cumque eaque eligendi fugit impedit laborum nesciunt non, perspiciatis quas quia, sunt
                veniam! Ab adipisci alias aliquam eaque esse exercitationem modi nisi nulla obcaecati, perspiciatis
                quaerat quas sit!
            </div>
            <div>Aliquam architecto et, excepturi illo incidunt maxime perspiciatis! Dicta doloribus fugit in ipsam
                quos. A commodi distinctio eaque est ex facere facilis impedit nulla placeat quaerat quasi repudiandae,
                totam ullam?
            </div>
            <div>Aperiam omnis perferendis voluptates! Alias eligendi illum rem temporibus voluptate? Aliquam aperiam
                commodi corporis dicta ducimus eos error eveniet, facere, iure libero maiores minus mollitia non quae
                quos tempore voluptatibus.
            </div>
            <div>Aliquid asperiores commodi dolorum ducimus earum et eveniet expedita hic ipsam iusto labore, laborum
                natus nulla, officia pariatur praesentium quo quos repellendus unde voluptates! Ad assumenda consectetur
                maiores non reiciendis?
            </div>
            <div>Autem dolor eligendi impedit incidunt maxime nesciunt, placeat ratione rerum soluta sunt tempora vero?
                Autem, cum eaque error libero natus nisi nostrum, quae quisquam rerum sit temporibus vel voluptatibus
                voluptatum.
            </div>
            <div>Ad aliquid aperiam at ea expedita id labore laborum magnam optio, quidem? Adipisci inventore molestiae
                nulla porro possimus, quasi quidem quisquam? Enim, libero obcaecati! Dignissimos distinctio eveniet
                excepturi fugiat quasi!
            </div>
            <div>Accusamus asperiores autem earum facere magni modi nisi placeat, quas ratione vero. Accusamus,
                blanditiis cupiditate dolorem enim, eveniet id illum inventore ipsa libero officiis quae quisquam
                temporibus velit! Dolore, iste.
            </div>
            <div>Amet animi aut culpa cum debitis deleniti dicta, dolorem dolorum enim ex fuga id inventore itaque
                libero minima, officiis omnis perspiciatis provident quia quo repudiandae temporibus tenetur veniam
                veritatis voluptatem.
            </div>
            <div>Aliquam animi commodi debitis, eaque earum eos et excepturi explicabo harum illo in incidunt ipsum
                iste, magni, minima nobis nostrum nulla odio officiis perferendis provident quam quisquam recusandae
                vitae voluptatem?
            </div>
        </div>


        <script>
            let buttonE = document.getElementById('btn');
            buttonE.addEventListener('click',function(){
                alert('按钮被点击了！')
            });
            let h4E = document.querySelector('h4');
            h4E.addEventListener("mouseover",function(){
                console.log('该标题被查看了！')
            });
            // window对象是浏览器内置的
            // window.addEventListener('resize',function(){
            //     alert('窗口大小被修改了...')
            // })
            // window.addEventListener("scroll",function(){
            //     alert('页面滚动了...')
            // })

            // 1.关于JS对象的使用
            let p1 = {
                name:'张三',
                age:18,
                say:function(){
                    console.log('大家好，我是'+name+'，今年'+this.age+'岁！')
                }
            };
            console.log(p1);
            console.log(p1.name);
            console.log(p1.age);
            p1.say();

            // 2.先创建一个空对象，再动态给其添加属性与方法
            let p2 = {};
            p2.name = '李四';
            p2.age = 20;
            p2.say = function(){
                console.log('大家好，我是'+name+',今年'+this.age+'岁！');
            };
            console.log(p2);
            console.log(p2.name);
            console.log(p2.age);
            p2.say();

        </script>


    </body>

</html>